<template>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
		<view v-for="(item,index) in listdata" :key="index" style="position: relative;margin-bottom: 20rpx">
			<view @click="gotodetail(item.id)">
				<swiper style="height: 400rpx;width: 100vw;background-color: #fff;" autoplay="true" indicator-dots="true">
					<swiper-item v-for="(itemimg,indeximg) in item.thumb">
						<image class="swiperimg" :src="itemimg" mode="aspectFit"></image>
					</swiper-item>
				</swiper>

				<view class="prizeinfo">
					<view class="prize-item" v-for="(itemtitle,indextitle) in item.title">
						<text class="font-size">{{prizetitle[index]}}等奖：{{itemtitle}}</text><text class="font-size font-color ">x{{item.count[indextitle]}}份</text>
					</view>

					<text class="opentimer">{{item.draw_type}}</text>
				</view>
				<!--出现已参与-->
				<view class="canyuxin" v-if="item.part_in"></view>
			</view>
			<!--是否参与icon-->
			<!-- 	<image class="joinicon" src="../../static/image/alreadyInvolved.png" mode="aspectFill"></image> -->
			<!--是否结束-->
			<view class="activend" v-if="item.status>0">
				<text class="font-end">已结束</text>
			</view>
			
			<!--蓝V认证赞助商-->
			<view v-if="item.bAuth==2" class="authicon">
				<image src="/static/image/authicon.png"></image>
				<text>{{item.bTitle}} 赞助</text>
			</view>
			<!--赞助商-->
			<view class="sponsor" v-else>{{item.bTitle}} 赞助</view>
		</view>

	</mescroll-uni>


</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				listdata: [],
				prizetitle: ['一', '二', '三', '四', '五'],
				upOption: {
					use: true,
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
				},
				downOption: {
					use: false
				}
			}
		},
		computed: {
			bigdreaw() {
				//奖品ID是否改变
				return this.$common.state.dreawid
			}
		},
		watch: {
			bigdreaw(id) {
				this.isjoin(id)
			}
		},

		onLoad(option) {
			//清除红点
			this.$redpoint(option);
		},
		methods: {
			//修改参与状态
			isjoin(dreaw_id) {
				this.listdata.map((item, index) => {
					if(item.id==dreaw_id){
						this.listdata[index]['part_in'] = 1
					}
				})
			},
			gotodetail(id) {
				uni.navigateTo({
					url: '/pages/lottery/lottery?id=' + id,
				})
			},
			upCallback(page) {
				//console.log(page);
				this.getinitdata(page.num).then(res => {
					console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg(error);
				})
			},
			//获取列表数据
			getinitdata(pages) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/lottery/luckGift',
						param: {
							page: pages
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.canyuxin {
		position: absolute;
		top: 15rpx;
		left: 0;
		width: 109rpx;
		height: 50rpx;
		background-image: url(../../static/image/alreadyInvolved.png);
		background-size: 109rpx 50rpx;
		background-repeat: no-repeat;
	}

	.activend {
		width: 200rpx;
		height: 200rpx;
		background-color: #000;
		border-radius: 50%;
		opacity: 0.5;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 110rpx;
		left: 260rpx;

	}

	.activendafter {
		width: 100rpx;
		height: 100rpx;
		background-color: #000;
		opacity: 0.2;
		border-radius: 50%;
		border-color: #fff;
		border-style: solid;
		border-width: 2rpx;

		top: 120rpx;
		left: 260rpx;

	}

	.font-end {
		font-size: 36rpx;
		color: #fff;
		transform: rotate(-20deg);
		font-weight: bold;
		border-color: #fff;
		border-style: solid;
		border-width: 4rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 150rpx;
		opacity: 0.6;
	}

	.joinicon {
		width: 109rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		left: 0;
	}

	.swiperimg {
		width: 750rpx;
		height: 400rpx;
	}

	.bginfo {
		border-bottom-color: #f0f0f0;
		border-bottom-width: 30rpx;
		border-bottom-style: solid;
	}

	.sponsor {
		position: absolute;
		padding: 10rpx 20rpx;
		background-color: #000;
		opacity: 0.4;
		top: 10rpx;
		right: 0;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		color: #fff;
	}
	.authicon {
		font-size: 25rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 20rpx;
		position: absolute;
		border-bottom-left-radius: 20rpx;
		background-color: $uni-color-primary;
		padding: 10rpx 20rpx;
		top: 20rpx;
		right: 0;
		z-index: 999;
	
		image {
			width: 30rpx;
			height: 29rpx;
			margin-right: 10rpx;
		}
	}
	
	.prizeinfo {
		flex: 1;
		padding: 30rpx;
		background-color: #fff;
	}

	.prize-item {

		flex-direction: row;
		margin: 10rpx 0;
	}

	.font-size {
		font-size: 32rpx;
	}

	.font-color {
		color: #808080;
	}

	.opentimer {
		font-size: 28rpx;
		color: #808080;
		margin: 10rpx 0;
	}
</style>
